웹 컴포넌트 생명주기: 커스텀 엘리먼트 생성 및 관리

            class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadow.innerHTML = `
      <style>
        :host {
          display: block;
          border: 1px solid #ccc;
          padding: 10px;
        }
      </style>
      <p>Hello from MyComponent!</p>
    `;

    // Example of fetching data (replace with your actual API endpoint)
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // Process the data and update the component's UI
        const dataElement = document.createElement('p');
        dataElement.textContent = `Data: ${JSON.stringify(data)}`;
        this.shadow.appendChild(dataElement);
      });
  }
}

customElements.define('my-component', MyComponent);

            

              
                Copy
              
            
          

            class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
    this.eventListener = null; // Store the event listener
  }

  connectedCallback() {
    // ... (previous code) ...

    // Example: Add a resize event listener
    this.eventListener = () => {
      console.log('Component resized!');
    };
    window.addEventListener('resize', this.eventListener);
  }

  disconnectedCallback() {
    // Remove the resize event listener
    if (this.eventListener) {
      window.removeEventListener('resize', this.eventListener);
      this.eventListener = null;
    }

    console.log('Component disconnected!');
  }
}

            

              
                Copy
              
            
          

            class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
  }

  static get observedAttributes() {
    return ['message', 'country'];
  }

  attributeChangedCallback(name, oldValue, newValue) {
    console.log(`Attribute ${name} changed from ${oldValue} to ${newValue}`);

    if (name === 'message') {
      this.shadow.querySelector('p').textContent = newValue;
    } else if (name === 'country') {
       //Imagine fetching flag image based on the selected country code
       let flagURL = `https://flagcdn.com/w40/${newValue}.png`;
       let img = this.shadow.querySelector('img');
       if(!img){
          img = document.createElement('img');
          this.shadow.appendChild(img);
       }
       img.src = flagURL;
       img.alt = `Flag of ${newValue}`;
    }
  }

  connectedCallback() {
    this.shadow.innerHTML = `
      <style>
        :host {
          display: block;
          border: 1px solid #ccc;
          padding: 10px;
        }
      </style>
      <p>Hello from MyComponent!</p>
      <img style="width:40px;"/>
    `;

    // Set initial message from attribute if it exists
    if (this.hasAttribute('message')) {
      this.shadow.querySelector('p').textContent = this.getAttribute('message');
    }
  }
}

customElements.define('my-component', MyComponent);

            

              
                Copy
              
            
          

            <my-component message="Hello World!" country="gb"></my-component>
            

              
                Copy
              
            
          

            const myComponent = document.querySelector('my-component');
myComponent.setAttribute('message', 'Updated Message!');
myComponent.setAttribute('country', 'us'); //change the country flag

            

              
                Copy
              
            
          

            class MyComponent extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: 'open' });
  }

  adoptedCallback(oldDocument, newDocument) {
    console.log('Component adopted to a new document!');
    console.log('Old Document:', oldDocument);
    console.log('New Document:', newDocument);

    // Update any document-specific references here
    // For example, if you have a reference to a global variable
    // in the old document, you might need to update it to the new document's global variable.
  }

  connectedCallback() {
    this.shadow.innerHTML = `
      <style>
        :host {
          display: block;
          border: 1px solid #ccc;
          padding: 10px;
        }
      </style>
      <p>Hello from MyComponent!</p>
    `;
  }
}

customElements.define('my-component', MyComponent);

            

              
                Copy